<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: rgb(238, 224, 226);
        }

        .book {
            user-select: none;
            width: 300px;
            height: 400px;
            background-color: #5e94a8;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) perspective(2000px);
            transition: 1s;
            box-shadow: 0 20px 100px rgba(0, 0, 0, .5);
        }

        .book-click {
            transform: translate(-50%, -50%) perspective(2000px) rotate(-10deg);
        }

        .book::before {
            content: '';
            position: absolute;
            top: -5px;
            width: 100%;
            height: 5px;
            background-color: rgb(80, 124, 141);
            transform-origin: bottom;
            transform: skewX(-45deg);
        }

        .book::after {
            content: '';
            position: absolute;
            top: 0;
            right: -5px;
            width: 5px;
            height: 100%;
            background-color: rgba(0, 191, 255, 0.425);
            transform-origin: left;
            transform: skewY(-45deg);
        }

        .page {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(252, 252, 243);
            background-size: 100% 100%;
            transform-origin: left;
            transition: .8s cubic-bezier(.69, .41, .42, 1.34);
            box-shadow: inset 300px 0px 50px rgba(0, 0, 0, .5);
            text-align: center;
            line-height: 400px;
            font-size: 60px;
            transform-style: preserve-3d;
            color: #031116;
            font-family: '幼圆';
            font-weight: 700;
        }



        .turn-pages {
            transform: rotateY(-135deg);
            color: transparent;
        }



        .shadow {
            box-shadow: inset 20px 0px 50px rgba(0, 0, 0, .5);
        }


        .page:nth-child(1) {
            box-shadow: none;
            background: url(https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210602-151306-021e.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp) no-repeat top center;
            background-size: 100% 100%;
        }

        button {
            user-select: none;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 5px 10px;
            border-radius: 10px;
            margin: 5px;

        }

        .btn-box {
            padding-top: 30px;
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="btn-box">
        <button id='ran'>随机点名</button><button id='reset'>重置</button>
    </div>
    <div class="book">
        <div class="page">、

        </div>

    </div>
</body>
<script>

    var listes = ["霍杰", "康帅奇", "黄恒亮", "胡龑涛", "周晨露", "刘豪", "倪旭辰", "杨树森", "杨凯", "欧才旺", "马许鹏", "刘盼", "赵妍", "肖嘉乐", "王心乐", "尚佳琪", "赵春苗", "李梦雪", "张瑶", "吴景隆", "张进", "王昌", "张梦玮", "穆凡", "宋乐", "吕冰欣", "李博", "张浩锐", "刘多多", "张成阳", "程天宝", "郭春鹏", "郭金", "张千禧", "董宇豪", "王三元", "罗浩天", "贺鑫鑫", "朱珂欣", "张衡", "李美琪", "汪彦龙"];

    var book = document.querySelector('.book')

    for (var i = 0; i < listes.length; i++) {
        var page = document.createElement('div')
        page.innerHTML = listes[i];
        page.className = 'page main'
        book.appendChild(page)
    }


    var pages = document.querySelectorAll('.page')
    var index = 0;

    for (var i = 1; i <= pages.length - 1; i++) {
        pages[i].style.zIndex = -i;
    }


    book.onclick = function () {
        book.classList.add('book-click')
        if (index <= pages.length - 1) {
            pages[index].style.zIndex = index;
            pages[index].classList.add('turn-pages')
            if (index <= pages.length - 2) {
                pages[index + 1].classList.add('shadow')
            }
            index++;
        } else {
            for (var j = pages.length - 1; j >= 0; j--) {
                pages[j].style.zIndex = -j
            }
            for (var i = 0; i < pages.length; i++) {
                pages[i].classList.remove('turn-pages')
                pages[i].classList.remove('shadow')
                index = 0;
            }
        }
        return false
    }


    var ran = document.querySelector('#ran')
    var timer = null;
    ran.onclick = function () {
        clearInterval(timer)
        timer = null;
        var index = Math.floor(Math.random() * listes.length) + 1;
        timer = setInterval(function () {
            book.click();
        }, 100)
        setTimeout(function () {
            clearInterval(timer)
            timer = null;
        }, index * 50)
    }

    var reset = document.querySelector('#reset')
    reset.onclick = function () {
        location.reload()
    }
</script>

</html>